import React, { useCallback, useEffect, useState } from 'react'
import qs from "qs"
import { clearObject } from '../../uitl/clearObject';
import List, { ListType } from './List'
import SearchProject from './SearchProject'
import { useDelayedValue } from '../../uitl/useDelayedValue';

const apiUrl = "http://localhost:3001"

export default function ProjectList() {
  const [users, setUers] = useState([]);
  const [projects, setProjects] = useState([]);
  const [param, setParam] = useState({
    name: "",
    personId: 0
  })

  const delayParam = useDelayedValue(param)
 
  useEffect(() => {
    fetch(`${apiUrl}/users`).then(async (res) => {
      setUers(await res.json())
    })
  }, [])

  useEffect(() => {
    fetch(`${apiUrl}/projects?${qs.stringify(clearObject(delayParam))}`).then(async (res) => {
      setProjects(await res.json())
    }
    )
  }, [delayParam])

  return (
    <div>
      <SearchProject setParam={setParam} users={users} param={param} />
      <List projects={projects} users={users} />
    </div>
  )
}
